<template>
  <div class="box">
    <div class="cart">
      <div class="title">inline school</div>
      <div class="mt-[20px]">
        <img src="../../image/logo.png" style="width: 93px; height: 84px" />
      </div>
      <div class="border mt-[46px]"></div>
      <div class="mt-[39px]">
        <ProForm :config="setFormConfig" ref="form" class="" />
      </div>
      <div class=" mt-[34px]">
        <div class="flex justify-end cas">
          <el-button
            type="primary"
            color="#081F42"
            @click="onSubmit"
            :loading="loading"
            >登入</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  getCurrentInstance,
  reactive,
} from "vue";
import FouButton from "@/components/foundation/FouButton.vue";

import ProForm from "@/components/ProForm/index.vue";
import setFormConfig from "./index";
import { login } from "@/http/index.js";
import { msg ,message} from "@/common/function.js";
import { useRouter } from "vue-router";

const router = useRouter();
const form = ref(null);
const loading = ref(false);
const onSubmit = (e) => {
  form.value.submit(async (e) => {
    loading.value = true;
    const data = await login(e);
    console.log(data);
    if (data.code == 200) {
      let token = data.data.token;
      sessionStorage.setItem("token", token);
      msg("登錄成功");
      loading.value = false;
      router.push("/");
    }else{
      loading.value = false;
    }
  });
};
function onKeyup(e) {
  if (e.key == "Enter") onSubmit();
}

onMounted(() => {
  document.addEventListener("keyup", onKeyup);
});

// onBeforeUnmount(()=>{
//     document.removeEventListener("keyup",onKeyup)
// })
const myKeydown = () => {
  console.log(123);
};
</script>

<style lang='less' scoped>
@media screen and (min-width: 100px) and (max-width: 600px) {
.box {
  width: 500px;
  height: 100vh;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}
}
.box {
  height: 100vh;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}
.cart {
  padding: 50px 40px 18px 40px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background-color: #fff;
  >div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .border {
    border: 1px solid #000;
    opacity: 0.1;
  }
}

.cas {
  width: 100%;
  
}
.title{
  font-weight: 600;
  font-size: 34px;
}
</style>